<template>
    <el-row class="productcategory">
        <el-col :span="24" class="content-header">商品类别管理</el-col>
        <el-row :gutter="20">
            <el-col :span="6">
                <el-card class="box">
                    <el-col :span="24" class="box-header">
                        商品总类
                        <el-button size="small" type="primary" @click="insertCategory('')">
                            <i class="fa fa-plus right-5"></i>新增</el-button>
                    </el-col>
                    <el-col :span="24" class="box-body">
                        <el-table ref="categoryLeftDataTable" :data="categoryLeftData" :show-header="false" highlight-current-row
                            @current-change="handleCurrentChange">
                            <el-table-column>
                                <template slot-scope="scope">
                                    <el-col :span="12">
                                        <el-button type="text">{{scope.row.name}}</el-button>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-button-group>
                                            <el-tooltip class="item" effect="dark" content="修改" placement="bottom">
                                                <el-button type="primary" size="mini" @click="handleEdit(scope.row)">
                                                    <i class="fa fa-pencil"></i>
                                                </el-button>
                                            </el-tooltip>
                                            <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
                                                <el-button type="danger" size="mini" @click="handleDelete(scope.row.id)">
                                                    <i class="fa fa-close"></i>
                                                </el-button>
                                            </el-tooltip>
                                        </el-button-group>
                                    </el-col>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                </el-card>
            </el-col>
            <el-col :span="18">
                <el-card class="box">
                    <el-col :span="24" class="box-header">
                        商品分类
                        <el-button size="small" type="primary" @click="insertCategory(currentRow.id)">
                            <i class="fa fa-plus right-5"></i>新增</el-button>
                    </el-col>
                    <el-col :span="24" class="box-body top-10">
                        <el-row v-for="(item, index) in categoryRightDate" :item="item" :index="index" :key="item.id">
                            <el-col :span="23" :offset="1">
                                <b>{{(index + 1) +"." }}&nbsp;</b>
                                <el-tag type="success">{{item.lable}}</el-tag>
                                <el-button type="text" @click="insertCategory(item.id)">增加</el-button>
                                <el-button type="text" @click="handleDelete(item.id)">删除</el-button>
                            </el-col>
                            <el-col :span="22" :offset="2">
                                <el-col class="tag-top" :span="8" v-for="(child, ind) in item.children" :item="child" :index="ind" :key="child.id">
                                    <b>{{(ind + 1) +"." }}&nbsp;</b>
                                    <el-tag closable @close="handleDelete(child.id)">{{child.lable}}</el-tag>
                                </el-col>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-card>
            </el-col>
        </el-row>
        <el-dialog title="编辑产品类别" :visible.sync="formVisible">
            <el-form :model="categoryInfo" :label-position="labelPosition">
                <el-form-item label="产品类别名称：" :label-width="formLabelWidth">
                    <el-input v-model="categoryInfo.name" placeholder="产品类别名称"></el-input>
                </el-form-item>
                <el-form-item label="描述：" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="categoryInfo.describe" placeholder="描述"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="formVisible = false;" size="small">取 消</el-button>
                <el-button type="primary" @click="submitDataForm" size="small">
                    <i class="fa fa-check fa-lg right-5" aria-hidden="true"></i>确 定
                </el-button>
            </div>
        </el-dialog>
    </el-row>
</template>
<script>
import './productcategory.scss';
import router from '@/router/index';

export default {
    data() {
        return {
            categoryLeftData: [{
                id: "1",
                name: "调味食品"
            }, {
                id: "2",
                name: "酒水饮料"
            }],
            categoryRightDate: [{
                id: "3",
                lable: "酱油",
                children: [{
                    id: "3.1",
                    lable: "高鲜酱油"
                }, {
                    id: "3.2",
                    lable: "生抽"
                }, {
                    id: "3.3",
                    lable: "老抽"
                }]
            }, {
                id: "4",
                lable: "调料",
                children: [{
                    id: "4.1",
                    lable: "蚝油"
                }, {
                    id: "4.2",
                    lable: "调味酱"
                }, {
                    id: "4.3",
                    lable: "调味汁"
                }, {
                    id: "4.4",
                    lable: "佐料酱"
                }, {
                    id: "4.5",
                    lable: "味精"
                }]
            }, {
                id: "5",
                lable: "食用油",
                children: [{
                    id: "5.1",
                    lable: "菜籽油"
                }, {
                    id: "5.2",
                    lable: "花生油"
                }, {
                    id: "5.3",
                    lable: "调和油" 
                }]
            }],
            formVisible: false,
            formLabelWidth : "120px",
            labelPosition : this.global.labelPosition,
            categoryInfo : {
                name : "",
                describe : "",
                id : "",
                parentId : ""
            },
            currentRow : ""
        }
    },
    methods: {
        init : function(){
            if(this.categoryLeftData.length != 0){
                this.$refs["categoryLeftDataTable"].setCurrentRow(this.categoryLeftData[0]);
            }
        },
        handleCurrentChange : function(val){
            this.currentRow = val;
        },
        handleEdit : function(row){
            this.formVisible = true;
            this.categoryInfo = {
                name : row.name,
                describe : row.describe,
                id : row.id,
                parentId : row.parentId
            }
        },
        handleDelete: function(id) {
            this.$confirm('此操作将永久删除记录, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let length = this.categoryRightDate.length;
                if (length == 0) {
                    return;
                }
                this.deleteChlidById(id, this.categoryRightDate)
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            })
        },
        deleteChlidById: function(id, elementArr) {
            let flag = false;
            let tag = -1;
            let length = elementArr.length;
            for (let index = 0; index < length; index++) {
                let element = elementArr[index].children;
                if ((!element || element.length == 0) && elementArr[index].id == id) {
                    flag = true;
                    tag = index;
                    break;
                } else if (element && element.length != 0) {
                    let b = this.deleteChlidById(id, element);
                    if (b) {
                        break;
                    }
                }
            }
            if (flag) {
                console.info(tag)
                elementArr.splice(tag, 1);
                return true;
            }
            return false;
        },
        insertCategory : function(parentId){
            console.info(parentId)
            this.formVisible = true;
            this.categoryInfo = {
                name : "",
                describe : "",
                id : "",
                parentId : parentId
            }
        },
        submitDataForm : function(){

        }
    },
    watch: {

    },
    mounted : function(){
        this.init();
    },
    created: function() {
    },
    beforeDestroy: function() {

    }
}
</script>